<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>EDRS</title>
		<link rel="stylesheet" href="../bgAll/css/common.css" type="text/css" />
		<link rel="stylesheet" href="./css/EDAS.css" type="text/css" />

		<link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css" />
		<style type="text/css">
			.fakeloader {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0px;
				left: 0px;
				z-index: 999;
				background-image: url(../bgAll/img/bg.png);
			}
			
			.toCenter {
				top: 0;
			}
			
			.col75 {
				width: 80%;
			}
			
			html,
			body {
				overflow: hidden;
			}
			
			.middleBegin {
				background-color: rgba(112, 146, 190, 0.4);
				width: 450px;
				height: 450px;
				transform: rotateX(60deg) rotateZ(45deg);
				-webkit-transform: rotateX(60deg) rotateZ(45deg);
				-moz-transform: rotateX(60deg) rotateZ(45deg);
			}
			
			.middleDone {
				width: 1000px;
				height: 1000px;
				transform: rotateX(0deg) rotateZ(0deg);
				-webkit-transform: rotateX(0deg) rotateZ(0deg);
				-moz-transform: rotateX(0deg) rotateZ(0deg);
			}
			
			@-moz-keyframes top2display {
				from {
					top: 0;
					opacity: 0.4;
				}
				to {
					top: -530px;
					opacity: 0;
					display: none;
				}
			}
			
			@-ms-keyframes top2display {
				from {
					top: 0;
					opacity: 0.4;
				}
				to {
					top: -530px;
					opacity: 0;
					display: none;
				}
			}
			
			@-webkit-keyframes top2display {
				from {
					top: 0;
					opacity: 0.4;
				}
				to {
					top: -530px;
					opacity: 0;
					display: none;
				}
			}
			
			@keyframes top2display {
				from {
					top: 0;
					opacity: 0.4;
				}
				to {
					top: -530px;
					opacity: 0;
					display: none;
				}
			}
			
			@-moz-keyframes bottom2display {
				from {
					top: 390px;
					opacity: 0.4;
				}
				to {
					top: 700px;
					opacity: 0;
					display: none;
				}
			}
			
			@-ms-keyframes bottom2display {
				from {
					top: 390px;
					opacity: 0.4;
				}
				to {
					top: 700px;
					opacity: 0;
					display: none;
				}
			}
			
			@-webkit-keyframes bottom2display {
				from {
					top: 390px;
					opacity: 0.4;
				}
				to {
					top: 700px;
					opacity: 0;
					display: none;
				}
			}
			
			@keyframes bottom2display {
				from {
					top: 390px;
					opacity: 0.4;
				}
				to {
					top: 700px;
					opacity: 0;
					display: none;
				}
			}
			
			@-moz-keyframes middle2all {
				from {
					width: 450px;
					height: 450px;
					transform: rotateX(60deg) rotateZ(45deg);
					-webkit-transform: rotateX(60deg) rotateZ(45deg);
					-moz-transform: rotateX(60deg) rotateZ(45deg);
				}
				to {
					width: 1000px;
					height: 1000px;
					transform: rotateX(0deg) rotateZ(0deg);
					-webkit-transform: rotateX(0deg) rotateZ(0deg);
					-moz-transform: rotateX(0deg) rotateZ(0deg);
					opacity: 0;
					display: none;
					margin-left: -275px;
					margin-top: -225px;
				}
			}
			
			@-ms-keyframes middle2all {
				from {
					width: 450px;
					height: 450px;
					transform: rotateX(60deg) rotateZ(45deg);
					-webkit-transform: rotateX(60deg) rotateZ(45deg);
					-moz-transform: rotateX(60deg) rotateZ(45deg);
				}
				to {
					width: 1000px;
					height: 1000px;
					transform: rotateX(0deg) rotateZ(0deg);
					-webkit-transform: rotateX(0deg) rotateZ(0deg);
					-moz-transform: rotateX(0deg) rotateZ(0deg);
					opacity: 0;
					display: none;
					margin-left: -275px;
					margin-top: -225px;
				}
			}
			
			@-webkit-keyframes middle2all {
				from {
					width: 450px;
					height: 450px;
					transform: rotateX(60deg) rotateZ(45deg);
					-webkit-transform: rotateX(60deg) rotateZ(45deg);
					-moz-transform: rotateX(60deg) rotateZ(45deg);
				}
				to {
					width: 1000px;
					height: 1000px;
					transform: rotateX(0deg) rotateZ(0deg);
					-webkit-transform: rotateX(0deg) rotateZ(0deg);
					-moz-transform: rotateX(0deg) rotateZ(0deg);
					opacity: 0;
					display: none;
					margin-left: -275px;
					margin-top: -225px;
				}
			}
			
			@keyframes middle2all {
				from {
					width: 450px;
					height: 450px;
					transform: rotateX(60deg) rotateZ(45deg);
					-webkit-transform: rotateX(60deg) rotateZ(45deg);
					-moz-transform: rotateX(60deg) rotateZ(45deg);
				}
				to {
					width: 1000px;
					height: 1000px;
					transform: rotateX(0deg) rotateZ(0deg);
					-webkit-transform: rotateX(0deg) rotateZ(0deg);
					-moz-transform: rotateX(0deg) rotateZ(0deg);
					opacity: 0;
					display: none;
					margin-left: -275px;
					margin-top: -225px;
				}
			}
			
			.cacheFloor {
				top: 138px;
			}
		</style>

	</head>

	<body class="wrap">

		<div class="fakeloader"></div>

		<div class="mod-star-list">
			<div class="inner"></div>
		</div>
		<!-- header Start -->
		<div id="header" class="mt12 clearfix" style="margin-left:10px">
			<div class="header-left">
				<a href="../MQ/index.html" class="clearfix">
					<div class="bg-next rotate5 btn"></div>
					<p>浏览下一个产品</p>
				</a>
			</div>
			<div class="header-right">
				<div class="header-open">企业级分布式应用服务<span style="color:#90b8f1;font-size:14px">EDAS</span>
					<p>
						Enterprise Distributed App Service</p>
				</div>
			</div>
		</div>
		<!-- header End -->
		<div class="content" style="height: 100%;width: 100%;">
			<!-- 正文开始  -->

			<div class="col75 toCenter" style="height: 100%;display: none;">
				<section class="dbFloor" style="opacity: 0.4; top: 390px; transition: 0.2s linear;">

					<img src="img/RDSimg/indexImg/dbFloor.png">
					<div class="db"></div>
					<div class="toDbBoxShadow nav_icon_light dis_none"></div>
				</section>
				<section class="cacheFloor" id="cache" style="height: 100%;padding-left:60px;">
					<div class="middleBegin">
						<table align="center" height="100%" width="100%">
							<tr style="height: 50%;">
								<td>中间件PaaS</td>
								<td>高性能服务框架</td>
							</tr>
							<tr style="height: 50%;">
								<td>服务治理与运维</td>
								<td>数据化运营</td>
							</tr>
						</table>
					</div>
				</section>
				<section class="appFloor" style="opacity: 0.4; top: 0px; transition: 0.2s linear;">

					<img src="img/RDSimg/indexImg/appFloor.png">
					<div class="app"></div>
					<div class="toAppBoxShadow nav_icon_light dis_none"></div>
				</section>

				<div class="dbCanvas">
					<aside class="dbCanvasPos1">
						<canvas id="db0" style="position:absolute;top:120px;left: 20%;"></canvas>
						<canvas id="db1" style="position:absolute;top:80px;left: 23%;"></canvas>
					</aside>
					<aside class="dbCanvasPos2">
						<canvas id="db3" style="position:absolute;top:100px;left: 20%;"></canvas>
						<canvas id="db4" style="position:absolute;top:80px;left: 23%;"></canvas>
					</aside>
				</div>
				<div class="cacheCanvas">
					<aside class="cacheCanvasPos1">
						<canvas id="cache0" style="position:absolute;top:80px;left: 20%;"></canvas>
						<canvas id="cache1" style="position:absolute;top:100px;left: 23%;"></canvas>
					</aside>
					<aside class="cacheCanvasPos2">
						<canvas id="cache3" style="position:absolute;top:100px;left: 20%;"></canvas>
						<canvas id="cache4" style="position:absolute;top:80px;left: 23%;"></canvas>
					</aside>
				</div>
				<div class="appCanvas">
					<aside class="appCanvasPos1">
						<canvas id="app0" style="position:absolute;top:100px;left: 20%;"></canvas>
						<canvas id="app1" style="position:absolute;top:80px;left: 23%;"></canvas>
					</aside>
					<aside class="appCanvasPos2">
						<canvas id="app3" style="position:absolute;top:100px;left: 20%;"></canvas>
						<canvas id="app4" style="position:absolute;top:80px;left: 23%;"></canvas>
					</aside>
				</div>

			</div>
			<!-- 正文结束  -->
			<style>
				.boxZone {
					height: 100%;
					width: 100%;
					position: relative;
				}
				
				.boxCanvas {
					width: 800px;
					height: calc(100% - 300px);
					margin: auto;
					margin-top: 150px;
					transform: rotateX(-60deg) rotateZ(20deg);
					border: 1px saddlebrown solid;
					-webkit-perspective: 500;
					-webkit-perspective-origin: 50% 50%;
				}
				
				.cubeBox {
					position: absolute;
					left: 0px;
					top: 100px;
				}
				.cube {
					margin: 0 auto;
					width: 30px;
					height: 30px;
					position: relative;
					-webkit-transform-style: preserve-3d;
				}
				.cube .rect {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 30px;
					height: 30px;
					background-color: rgba(176,187,222,0.3);
					border: 1px rgb(176,187,222) solid;
					box-shadow: 0px 0px 2px 2px rgb(176,187,222);
				}
				.cube .cubeA {
					-webkit-transform: rotateX(90deg) translateZ(15px);
				}
				
				.cube .cubeB {
					-webkit-transform: rotateX(-90deg) translateZ(15px);
				}
				
				.cube .cubeC {
					-webkit-transform: rotateY(-90deg) translateZ(15px);
				}
				
				.cube .cubeD {
					-webkit-transform: rotateY(90deg) translateZ(15px);
				}
				
				.cube .cubeE {
					-webkit-transform: rotateY(180deg) translateZ(15px);
				}
				
				.cube .cubeF {
					-webkit-transform: translateZ(15px);
				}
				.bigBox{
					margin-left: -20px;
					margin-top: -20px;
					-webkit-perspective: 1300;
					-webkit-perspective-origin: 50% 50%;
				}
				.bigBox .cube{
					width: 120px;
					height: 120px;
				}
				.bigBox .cube .rect{
					width: 120px;
					height: 120px;
					background-color: rgba(13,68,99,1);
					border: 1px black solid;
					box-shadow:none;
				}
				.bigBox .cube .cubeA {
					-webkit-transform: rotateX(90deg) translateZ(60px);
				}
				.bigBox .cube .cubeB {
					-webkit-transform: rotateX(-90deg) translateZ(60px);
				}
				.bigBox .cube .cubeC {
					-webkit-transform: rotateY(-90deg) translateZ(60px);
				}
				.bigBox .cube .cubeD {
					-webkit-transform: rotateY(90deg) translateZ(60px);
				}
				.bigBox .cube .cubeE {
					-webkit-transform: rotateY(180deg) translateZ(60px);
				}
				.bigBox .cube .cubeF {
					-webkit-transform: translateZ(60px);
				}
				@keyframes boxShake{
					0%{
						transform: rotateX(10deg) rotateY(0deg);
					}
					10%{
						transform: rotateX(-10deg) rotateY(-10deg);
					}
					20%{
						transform: rotateX(-10deg) rotateY(10deg);
					}
					30%{
						transform: rotateX(10deg) rotateY(10deg);
					}
					40%{
						transform: rotateX(-10deg) rotateY(0deg);
					}
					50%{
						transform: rotateX(9deg) rotateY(8deg);
					}
					60%{
						transform: rotateX(-1deg) rotateY(-7deg);
					}
					70%{
						transform: rotateX(8deg) rotateY(2deg);
					}
					75%{
						transform: rotateX(-6deg) rotateY(-7deg);
					}
					80%{
						transform: rotateX(7deg) rotateY(6deg);
					}
					83%{
						transform: rotateX(-6deg) rotateY(-7deg);
					}
					86%{
						transform: rotateX(7deg) rotateY(5deg);
					}
					90%{
						transform: rotateX(1deg) rotateY(-6deg);
					}
					92%{
						transform: rotateX(-7deg) rotateY(0deg);
					}
					95%{
						transform: rotateX(6deg) rotateY(-5deg);
					}
					97%{
						transform: rotateX(-3deg) rotateY(2deg);
					}
					100%{
						transform: rotateX(0deg) rotateY(0deg);
					}
				}
				.cubeBox1{
					left:196px;
					top:32%;
					transition: top 3s ease-in,
                				left 3s linear;
				    -webkit-transition: top 3s ease-in,
                				left 3s linear;
				    -moz-transition: top 3s ease-in,
                				left 3s linear;
				}
				@keyframes cubeBox1{
					0% {
						top: 100px;
						left: 0px;
					}
					30% {
						top: -5px;
						left: 39px;
					}
					100% {
						top: calc(32%);
						left:196px;
					}
				}
				@keyframes cubeBoxX1{
					0% {
						left: 0px;
					}
					100% {
						left: 196px;
					}
				}
				@keyframes cubeBoxY1{
					0% {
						top: 100px;
					}
					30% {
						top: -5px;
					}
					100% {
						top: 32%;
					}
				}
				.cubeBox2{
					left:95px;
					top:65%;
				}
				.cubeBox3{
					left:294px;
					top:52%;
				}
				.cubeBox4{
					left:430px;
					top:67%;
				}
				.cubeBox5{
					left:441px;
					top:34%;
				}
				.cubeBox6{
					left:541px;
					top:53%;
				}
				.cubeBox7{
					left:630px;
					top:37%;
				}
				.cubeBox8{
					left:657px;
					top:65%;
				}
			</style>
			<!-- 动画2 begin -->
			<div class="toCenter boxZone" style="">
				<div class="boxCanvas">
					<div class="cubeBox cubeBox1" data-left="250px" data-top="50%">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
					<div class="cubeBox cubeBox2" data-left="16%" data-top="57px">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
					<div class="cubeBox cubeBox3" data-right="17%" data-bottom="120px">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
					<div class="cubeBox cubeBox4">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
					<div class="cubeBox cubeBox5">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
					<div class="cubeBox cubeBox6">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
					<div class="cubeBox cubeBox7">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
					<div class="cubeBox cubeBox8" style="display: none;">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
					<div class="cubeBox bigBox">
						<!--用于设置景深的位置，一定要有个在所有旋转元素之上的元素，放置景深-->
						<div class="cube">
							<!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果  shineAction-->
							<div class="cubeA rect"></div>
							<!--具体效果看css就明白了。旋转下就好-->
							<div class="cubeB rect"></div>
							<div class="cubeC rect"></div>
							<div class="cubeD rect"></div>
							<div class="cubeE rect"></div>
							<div class="cubeF rect"></div>
						</div>
					</div>
				</div>
				<canvas style="position: absolute;height:calc(100% - 300px);width:800px;left:calc(50% - 400px);top:0px;"></canvas>
			</div>
			<!-- 动画2 end -->
		</div>
		<footer class="clearfix">
			<div class="footer-left fl">
				<a href="../index.html?goods=goods1" class="back shineAction"></a>
				<div class="backText">返回主菜单</div>
			</div>
			<div class="footer-right fr">
				<a href="" class="refresh shineAction"></a>
				<div class="refreshText">刷新&nbsp;</div>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src='../bgAll/js/jquery-1.11.1.min.js'></script>

	<script src="../bgAll/js/fakeLoader.min.js"></script>
	<script type="text/javascript" src='./js/common.js'></script>

	<script type="text/javascript" src='../bgAll/js/waypoints.js'></script>
	<script type="text/javascript" src='../bgAll/js/star.js'></script>
	<script type="text/javascript" src='js/index.js'></script>
	<script type="text/javascript" src="js/boxlines.js"></script>

</html>